<template>
  <div class="table-view">
    <el-table
      :data="dataList"
      style="width: 100%; border-radius: 10px"
      :row-class-name="props.tableRowClass"
      :header-cell-style="{
        background: 'var(--table-head-background)',
        color: 'var( --table-head-font-color)'
      }"
      :height="props.height"
      v-bind="attrs"
      border
      highlight-current-row
      :expand-row-keys="expands"
      :row-key="getRowKeys"
      @expand-change="expandChange"
    >
      >
      <el-table-column
        v-for="(item, index) in columns"
        v-bind="item"
        :key="index"
        :show-overflow-tooltip="{ effect: 'light' }"
      >
        <template #header>
          <slot name="header" :column="item">{{ item.label }}</slot>
        </template>

        <template #default="scope">
          <el-table
            v-if="item.type == 'expand'"
            style="width: 90%; margin: 0 auto"
            border
            :data="childrenDataList"
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column v-for="(item, index) in childrenColums" v-bind="item" :key="index">
              <template #default="scope">
                <slot>{{
                  item.name.includes('.')
                    ? scope.row[item.name.split('.')[0]][item.name.split('.')[1]]
                    : scope.row[item.name]
                }}</slot>
              </template>
            </el-table-column>
          </el-table>

          <slot v-else :row="scope.row" :index="scope.$index" :column="item"
            >{{
              item.name.includes('.')
                ? scope.row[item.name.split('.')[0]][item.name.split('.')[1]]
                : scope.row[item.name]
            }}
          </slot>
        </template>
      </el-table-column>

      <template #empty>
        <el-empty description="暂无数据" />
      </template>
    </el-table>

    <el-pagination
      v-if="dataList?.length > 0 && showPagination"
      v-model:currentPage="pageIndex"
      :page-size="props.pageSize"
      style="justify-content: center"
      background
      layout="total, prev, pager, next"
      :total="totalCount"
      @current-change="handleIndexChange"
    />
  </div>
</template>
<script setup>
import { ref, onMounted, useAttrs } from 'vue'
import { ElTable, ElEmpty, ElPagination, ElTableColumn } from 'element-plus'
const attrs = useAttrs()
const props = defineProps({
  fetch: {
    type: Function,
    default: () => {}
  },
  childrenFetch: {
    type: Function,
    default: () => {}
  },
  tableRowClass: {
    type: Function,
    default: () => {}
  },
  height: {
    type: Number,
    default() {
      return 80
    }
  },
  pageSize: {
    type: Number,
    default() {
      return 10
    }
  },
  columns: {
    type: Array,
    default() {
      return []
    }
  },
  childrenColums: {
    type: Array,
    default() {
      return []
    }
  }
})

// 初始化信息
const pageIndex = ref(1)
const totalCount = ref(0)
const dataList = ref([])
const childrenDataList = ref([])
const showPagination = ref(true)

// 获取数据
const _fetchData = (val) => {
  if (val) {
    pageIndex.value = val
  }
  props.fetch({ pageIndex: pageIndex.value, pageSize: props.pageSize }).then((item) => {
    if (item && item.list) {
      totalCount.value = item.total
      dataList.value = item.list
    } else {
      totalCount.value = 0
      dataList.value = []
    }
  })
}

const _childrenFetchData = (val) => {
  props.childrenFetch(val).then((item) => {
    // console.log('item', item)
    childrenDataList.value = item.list
  })
}

// 分页触发数据更新
const handleIndexChange = (val) => {
  _fetchData(val)
}

// 暴露方法
defineExpose({ _fetchData, _childrenFetchData })

// 数据更新
onMounted(() => {
  _fetchData()
})

const getRowKeys = (row) => {
  return row.id
}
const expands = ref([])
const expandChange = (row, expandedRows) => {
  _childrenFetchData(row.id)

  if (expandedRows.length) {
    expands.value = []
    if (row) {
      expands.value.push(row.id)
    }
  } else {
    expands.value = []
  }
}
</script>
<style scoped lang="less">
.el-pagination {
  padding: 8px;
}

.table-view {
  background-color: #ffffff;
  border-radius: 10px;
  /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
  box-shadow: 0px -1px 10px 3px var(--aside-shadow-color);
}
</style>
